﻿<Page
    x:Name="PageRoot"
    x:Class="LiveConnectExample.HubPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:common="using:LiveConnectExample.Common"
    xmlns:liveConnectExample="using:LiveConnectExample"
    mc:Ignorable="d">

    <Page.Resources>
        <x:String x:Key="ChevronGlyph">&#xE26B;</x:String>
        <common:BooleanToVisibilityConverter x:Key="IfTrueThenVisible" TrueValue="Visible"/>
        <common:BooleanToVisibilityConverter x:Key="IfFalseThenVisible" TrueValue="Collapsed"/>
        <common:NullToVisibilityConverter x:Key="IfNullThenNotVisible" NullValue="Collapsed"/>
        <liveConnectExample:SkyDriveItemToIconUriConverter x:Key="SkyDriveItemToIconUriConverter"/>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page.
    -->
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>

        <Hub>
            <Hub.Header>
                <!-- Back button and page title -->
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="80"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Button x:Name="BackButton" Margin="-1,-1,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=PageRoot}"
                        Style="{StaticResource NavigationBackButtonNormalStyle}"
                        VerticalAlignment="Top"
                        AutomationProperties.Name="Back"
                        AutomationProperties.AutomationId="BackButton"
                        AutomationProperties.ItemType="Navigation Button"/>
                    <TextBlock x:Name="PageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                        IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Top"/>
                </Grid>
            </Hub.Header>

            <HubSection Width="320" Margin="0,0,80,0" Header="{Binding Me.name}" Visibility="{Binding IsConnected, Converter={StaticResource IfTrueThenVisible}}">
                <HubSection.Background>
                    <ImageBrush Stretch="UniformToFill" />
                </HubSection.Background>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="5"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid.Resources>
                            <Style TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
                                <Setter Property="Margin" Value="5"/>
                            </Style>
                            <Style TargetType="HyperlinkButton" BasedOn="{StaticResource TextBlockButtonStyle}">
                                <Setter Property="Margin" Value="5"/>
                            </Style>
                        </Grid.Resources>
                        <Image Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="99" Source="{Binding ImageSource}" Width="180" Height="180" Margin="0,20,0,20" />
                        <TextBlock Grid.Row="1" Grid.Column="0" Text="Id: "/>
                        <TextBlock Grid.Row="1" Grid.Column="2" Text="{Binding Me.id}"/>
                        
                        <HyperlinkButton Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Content="Click To Manage" NavigateUri="{Binding Me.link}"/>
                        <TextBlock Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="99" Text="Additional Values:"/>
                        <ScrollViewer Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="99" VerticalScrollBarVisibility="Auto" Margin="5">
                            <ItemsControl ItemsSource="{Binding AdditionalDetails}">
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Text="{Binding Key}"/>
                                            <TextBlock Text=" - "/>
                                            <TextBlock Text="{Binding Value}"/>
                                        </StackPanel>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </ScrollViewer>
                    </Grid>
                </DataTemplate>
            </HubSection>

            <HubSection Header="Contacts" Visibility="{Binding IsConnected, Converter={StaticResource IfTrueThenVisible}}">
                <DataTemplate>
                    <ListView x:Name="ContactsListing"
                              ItemsSource="{Binding ElementName=PageRoot, Path=DataContext.Contacts}"
                              AutomationProperties.AutomationId="ContactsListing"
                              AutomationProperties.Name="Items"
                              TabIndex="1"
                              SelectionMode="None"
                              IsSwipeEnabled="false"
                              IsItemClickEnabled="True"
                              ItemClick="HandleContactClicked">
                        <ListView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3" ItemHeight="250" ItemWidth="250"/>
                            </ItemsPanelTemplate>
                        </ListView.ItemsPanel>
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <Grid HorizontalAlignment="Left">
                                    <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
                                        <Image Stretch="UniformToFill" AutomationProperties.Name="{Binding name}" Source="Assets/Profile.png"/>
                                    </Border>
                                    <StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
                                        <TextBlock Text="{Binding name}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" Height="60" Margin="15,0,15,0" FontWeight="SemiBold"/>
                                        <TextBlock Text="{Binding id}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10" FontSize="12"/>
                                    </StackPanel>
                                    <Border BorderThickness="5" BorderBrush="Red" Visibility="{Binding user_id, Converter={StaticResource IfNullThenNotVisible}}"></Border>
                                </Grid>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </DataTemplate>
            </HubSection>

            <HubSection Header="Calendars" Visibility="{Binding IsConnected, Converter={StaticResource IfTrueThenVisible}}">
                <DataTemplate>
                    <ListView x:Name="CalendarListing"
                              ItemsSource="{Binding ElementName=PageRoot, Path=DataContext.Calendars}"
                              AutomationProperties.AutomationId="CalendarListing"
                              AutomationProperties.Name="Items"
                              TabIndex="1"
                              SelectionMode="None"
                              IsSwipeEnabled="false"
                              IsItemClickEnabled="True"
                              ItemClick="HandleCalendarClicked">
                        <ListView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3" ItemHeight="250" ItemWidth="250"/>
                            </ItemsPanelTemplate>
                        </ListView.ItemsPanel>
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <Grid HorizontalAlignment="Left" Width="250" Height="250">
                                    <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
                                        <Image Stretch="UniformToFill" AutomationProperties.Name="{Binding name}" Source="Assets/Calendar.png"/>
                                    </Border>
                                    <StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
                                        <TextBlock Text="{Binding name}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" Height="60" Margin="15,0,15,0" FontWeight="SemiBold"/>
                                        <TextBlock Text="{Binding id}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10" FontSize="12"/>
                                    </StackPanel>
                                </Grid>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </DataTemplate>
            </HubSection>
            
            <HubSection Header="SkyDrive" Visibility="{Binding IsConnected, Converter={StaticResource IfTrueThenVisible}}">
                <DataTemplate>
                    <ListView x:Name="SkydriveListing"
                              ItemsSource="{Binding ElementName=PageRoot, Path=DataContext.SkydriveItems}"
                              AutomationProperties.AutomationId="SkydriveListing"
                              AutomationProperties.Name="Items"
                              TabIndex="1"
                              SelectionMode="None"
                              IsSwipeEnabled="false"
                              IsItemClickEnabled="True"
                              ItemClick="HandleSkyDriveItemClicked">
                        <ListView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2" ItemWidth="250"/>
                            </ItemsPanelTemplate>
                        </ListView.ItemsPanel>
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <Grid Margin="6">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="60"/>
                                        <ColumnDefinition Width="190"/>
                                    </Grid.ColumnDefinitions>
                                    <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="60" Height="60">
                                        <Image Source="{Binding Converter={StaticResource SkyDriveItemToIconUriConverter}}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
                                    </Border>
                                    <StackPanel Grid.Column="1" Margin="10,0,0,0">
                                        <TextBlock Text="{Binding name}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" MaxHeight="40"/>
                                        <TextBlock Text="{Binding id}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
                                    </StackPanel>
                                </Grid>

                                <!--<Grid HorizontalAlignment="Left" Width="250" Height="250">
                                    <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
                                        <Image Stretch="UniformToFill" AutomationProperties.Name="{Binding name}" Source="Assets/Folder-Open.png"/>
                                    </Border>
                                    <StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
                                        <TextBlock Text="{Binding name}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" Height="60" Margin="15,0,15,0" FontWeight="SemiBold"/>
                                        <TextBlock Text="{Binding id}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10" FontSize="12"/>
                                    </StackPanel>
                                </Grid>-->
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </DataTemplate>
            </HubSection>

            <HubSection Visibility="{Binding IsConnected, Converter={StaticResource IfFalseThenVisible}}" MaxWidth="600">
                <DataTemplate>
                    <TextBlock TextWrapping="Wrap">
                        The current user is not currenlty signed in to use Live from within this application.  It could also be the case that Scopes were changed so a new sign in and permission approval needs to occur.  To sign in, select Accounts from Settings.
                    </TextBlock>
                </DataTemplate>
            </HubSection>
        </Hub>
    </Grid>

    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Icon="Refresh" Label="Refresh" Command="{Binding RefreshItemsCommand}"/>
            <AppBarSeparator/>
            <AppBarButton Icon ="AddFriend" Label="Add Contact" Command="{Binding AddContactCommand}">
                <AppBarButton.Flyout>
                    <Flyout>
                        <Grid Width="320" Margin="20,10">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <liveConnectExample:ContactEditControl Grid.Row="0" DataContext="{Binding ContactBeingEdited}" />
                            <Grid Grid.Row="1">
                                <Button Content="Save" HorizontalAlignment="Center" Command="{Binding SaveContactBeingAddedCommand}"/>
                            </Grid>
                        </Grid>
                    </Flyout>
                </AppBarButton.Flyout>
            </AppBarButton>
        </CommandBar>
    </Page.BottomAppBar>
</Page>
